<template>
	<view>
		<!-- <el-input placeholder="输入年月" class="date-input"></el-input>
		<div ref="echarts-one" style="height: 400px;width: 1000px;" class="echarts-bar"></div> -->
		<div class="year-echarts">
			<div>
				<el-input placeholder="输入年月" class="date-input"></el-input>
				<div ref="echarts-year-money" style="height: 400px;width: 1000px;" class="echarts-bar"></div>
			</div>
			<div>
				<el-input placeholder="输入年月" class="date-input"></el-input>
				<div ref="echarts-year-count" style="height: 400px;width: 1000px;" class="echarts-bar"></div>
			</div>
		</div>
		<div class="months-echarts">
			<div>
				<el-input placeholder="输入月分" class="date-input"></el-input>
				<div ref="echarts-months-money" style="height: 400px;width: 1000px;" class="echarts-bar"></div>
			</div>
			<div>
				<el-input placeholder="输入月分" class="date-input"></el-input>
				<div ref="echarts-months-count" style="height: 400px;width: 1000px;" class="echarts-bar"></div>
			</div>
		</div>
		<div>
			<el-input placeholder="输入年月" class="date-input"></el-input>
			<div class="payway-echarts">
				<div ref="echarts-away-count" style="height: 400px;width:500px;" class="echarts-bar"></div>
				<div ref="echarts-away-money" style="height: 400px;width:500px;" class="echarts-bar"></div>
			</div>
		</div>
	</view>
</template>

<script>
import * as echarts from 'echarts';
export default {
	data() {
		let data = [];
		for (let i = 0; i <= 360; i++) {
			let t = (i / 180) * Math.PI;
			let r = Math.sin(2 * t) * Math.cos(2 * t);
			data.push([r, i]);
		}
		return {
			echartsObj: {},
			echartsOption: {
				title: {
					text: '年订单成交数量',
					top: 'top',
					left: 'left',
					textStyle: {
						fontSize: 14,
						fontWeight: '',
						color: '#333'
					}
				}, // 标题
				xAxis: {
					type: 'category',
					data: ['1', '2', '3', '4', '5', '6', '7', 8, 9, 10, 11, 12]
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						label: {
							show: true,
							position: 'inside'
						},
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			},
			
			yearCountObj: {},
			yearCountOptions: {
				title: {
					text: '年订单成交数量',
					top: 'top',
					left: 'left',
					textStyle: {
						fontSize: 14,
						fontWeight: '',
						color: '#333'
					}
				}, // 标题
				xAxis: {
					type: 'category',
					data: ['1', '2', '3', '4', '5', '6', '7', 8, 9, 10, 11, 12]
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						label: {
							show: true,
							position: 'inside'
						},
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			},
			yearMoneyObj: {},
			yearsMoneyOption: {
				title: {
					text: '年订单成交金额（单位:元）',
					top: 'top',
					left: 'left',
					textStyle: {
						fontSize: 14,
						fontWeight: '',
						color: '#333'
					}
				}, // 标题
				xAxis: {
					type: 'category',
					data: ['1', '2', '3', '4', '5', '6', '7', 8, 9, 10, 11, 12]
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						label: {
							show: true,
							position: 'inside'
						},
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			},
			
			monthsCountObj: {},
			monthsCountOptions: {
				title: {
					text: '年订单成交数量',
					top: 'top',
					left: 'left',
					textStyle: {
						fontSize: 14,
						fontWeight: '',
						color: '#333'
					}
				}, // 标题
				xAxis: {
					type: 'category',
					data: [1, 2, 3, 4, 5, 6,7, 8, 9, 10, 11, 12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110],
						type: 'bar',
						showBackground: true,
						label: {
							show: true,
							position: 'inside'
						},
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			},
			monthsMoneyObj: {},
			monthsMoneyOption: {
				title: {
					text: '年订单成交金额（单位:元）',
					top: 'top',
					left: 'left',
					textStyle: {
						fontSize: 14,
						fontWeight: '',
						color: '#333'
					}
				}, // 标题
				xAxis: {
					type: 'category',
					data: ['1', '2', '3', '4', '5', '6', '7', 8, 9, 10, 11, 12]
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						label: {
							show: true,
							position: 'inside'
						},
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			},
			
			payCountObj: {},
			payCountOptions: {
				title: {
					text: '支付方式占比（元）',
					subtext: '小标题',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [
					{
						name: '支付方式',
						type: 'pie',
						radius: '50%',
						data: [
							{ value: 1048, name: '支付宝' },
							{ value: 735, name: '微信' },
							{ value: 580, name: '其它' },
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			},
			payMoneyObj: {},
			payMoneyOptions: {
				title: {
					text: '支付方式占比（元）',
					subtext: '小标题',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [
					{
						name: '支付方式',
						type: 'pie',
						radius: '50%',
						data: [
							{ value: 1048, name: '支付宝' },
							{ value: 735, name: '微信' },
							{ value: 580, name: '其它' },
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			}
		};
	},
	mounted() {
		this.initEach();
		//this._initEcharts();
		this._initYearMoneyChart();
		this._initYearCountChart();
		this._initAwayMoneyChart();
		this._initAwayCountChart();
		
		this._initMonthCountChart();
		this._initMonthMoneyChart();
	},
	methods: {
		initEach(){
			let ar=[]
			for(let i=0;i<5;i++){
				for(let k=0;k<5;k++){
					if(i==k){
						ar[i]=k
					}else{
						ar[i]=100
					}
				}
			}
			console.log(ar)
		},
		// 初始化，一年订单成交量
		_initYearCountChart() {
			this.yearCountObj = echarts.init(this.$refs['echarts-year-count']);
			this.yearCountObj.setOption(this.yearCountOptions);
		},
		// 初始化，一年订单成交金额
		_initYearMoneyChart() {
			this.yearMoneyObj = echarts.init(this.$refs['echarts-year-money']);
			this.yearMoneyObj.setOption(this.yearsMoneyOption);
		},
		// 初始化，支付方式占比 Todo
		_initMonthCountChart() {
			this.monthsCountObj = echarts.init(this.$refs['echarts-months-count']);
			this.monthsCountObj.setOption(this.monthsCountOptions);
		},
		_initMonthMoneyChart() {
			this.monthsMoneyObj = echarts.init(this.$refs['echarts-months-money']);
			this.monthsMoneyObj.setOption(this.monthsMoneyOption);
		},
		// 初始化，支付方式占比
		_initDayCountChart() {
			this.echartsObj = echarts.init(this.$refs['echarts-day-count']);
			this.echartsObj.setOption(this.echartsOption);
		},
		_initDayMoneyChart() {
			this.echartsObj = echarts.init(this.$refs['echarts-day-money']);
			this.echartsObj.setOption(this.echartsOption);
		},
		// 初始化，支付方式占比数量
		_initAwayCountChart() {
			this.payCountObj = echarts.init(this.$refs['echarts-away-count']);
			this.payCountObj.setOption(this.payCountOptions);
		},
		// 初始化，支付方式占金额
		_initAwayMoneyChart() {
			this.payMoneyObj = echarts.init(this.$refs['echarts-away-money']);
			this.payMoneyObj.setOption(this.payMoneyOptions);
		},
		// _initEcharts() {
		// 	this.echartsObj = echarts.init(this.$refs['echarts-one']);
		// 	this.echartsObj.setOption(this.echartsOption);
		// }
	}
};
</script>
<style>
/**
 * The default size is 600px×400px, for responsive charts
 * you may need to set percentage values as follows (also
 * don't forget to provide a size for the container).
 */
.echarts {
	width: 100%;
	height: 100%;
}
.date-input{
	width: 200px;
	margin: 20px;
}
.payway-echarts{
	display:flex;
	width: 1000px;
	justify-content:space-between;
}
</style>
